<template>
  <div class="personal-center">
    <NavHeader />
    <div class="personal-center-content">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import NavHeader from '@/components/header'

interface Tree {
  label: string
  children?: Tree[]
}
const handleNodeClick = (data: Tree) => {
  console.log(data)
}
const defaultProps = {
  children: 'children',
  label: 'label',
}

const data: Tree[] = [
  {
    label: '好友列表',
    children: [
      {
        label: 'Level two 1-1',
      },
    ],
  },
]
</script>

<style lang="less" scoped>
.personal-center {
  display: flex;

  &-content {
    margin-top: 80px;
  }
}
</style>